<template>
  <div class="list-table" style="padding: 20px;">
    <complex-table :datas="tableData" />
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import ComplexTable from '@/components/ComplexTable/index'
import ContentBox from '@/layout/components/ContentBox'
import { search as searchApi } from '@/api/sys/admin'

export default {
  name: 'DynamicTableList'
  , components: { ComplexTable, ContentBox }
  , computed: {
    ...mapGetters([
      'fullHeight'
      , 'pageList'
    ])
  }
  , data() {
    return {
      tableData: {
        elem: '#demo'
        // ,height: 420
        , full: 222
        , url: '/demo/table/user/' // 数据接口
        , title: '用户表'
        , page: true // 开启分页
        , toolbar: 'default' // 开启工具栏，此处显示默认图标，可以自定义模板，详见文档
        , totalRow: true // 开启合计行
        , searchList: searchApi // 搜索接口
        , prohibitDelIds: [10001]
        , cols: [[ // 表头
          { type: 'checkbox', align: 'center', fixed: 'left' }
          , { field: 'id', search: true, align: 'center', type: 'integer', title: 'ID', width: 100, sort: true, fixed: 'left', totalRowText: '合计：' }
          , { field: 'name', search: true, title: '用户名', width: 80, fixed: 'left' }
          , { field: 'experience', title: '积分', width: 90, sort: true, totalRow: true }
          , { field: 'created_at', type: 'date-time', align: 'center', title: '时间', sort: true }
          , { field: 'created_at', type: 'time', title: '时间', sort: true }
          , { field: 'created_at', type: 'date', title: '时间Date', sort: true }
          , { field: 'sex', title: 'Tag 标签', width: 120, align: 'center', sort: true, type: 'tag', selections: [
            { label: '女', value: '0' }
            , { label: '男', value: '1' }
            , { label: '未知', value: '2', type: 'danger' }
          ] }
          , { field: 'sex', title: '性别', width: 80, align: 'center', sort: true, type: 'selections', selections: [
            { label: '女', value: '0' }
            , { label: '男', value: '1' }
            // ,{ label: '未知', value: '2'}
          ] }
          , { field: 'sex', title: '性别1', width: 86, align: 'center', sort: true, type: 'selections', selections: [
            { label: '女', value: '0', event: null }
            , { label: '男', value: '1', event: (item, fieldName, row, selections) => {
              console.log(item, fieldName, row, selections)
            } }
            , { label: '未知', value: '2', event: null }
          ] }
          , { field: 'id', title: '评分', width: 80, sort: true, totalRow: '{{ parseInt(d.TOTAL_NUMS) }} 分' }
          , { field: 'city', title: '城市', type: 'html', width: 150 }
          , { field: 'status', title: '开关', type: 'switch', event: this.test1, switch:
            {
              activeColor: '#13ce66', activeText: '开启', activeValue: 1
              , inactiveColor: '#ff4949', inactiveText: '关闭', inactiveValue: 0
            }
          }
          , { field: 'status', title: '开关1', type: 'switch', switch:
              {
                activeColor: '#13ce66', activeText: '开启', activeValue: 1
                , inactiveColor: '#ff4949', inactiveText: '关闭', inactiveValue: 0
              }
          }
          , { field: 'last_login_location', title: '签名', width: 200 }
          , { field: 'nick_name', title: '职业', width: 100 }
          , { field: 'wealth', title: '财富', width: 135, sort: true, totalRow: true }
          , { fixed: 'right', title: '操作', width: 260, align: 'center', toolbar: '#barDemo', actions: [
            {
              type: 'success'
              , label: '通过'
              // event: this.checkPass,
              // isShow: item => {
              //   return item.status !== 0;
              // }
            }
            , {
              // type: "danger",
              label: '不通过'
              , icon: 'el-icon-edit'
              // event: this.checkNoPass,
              // isShow: item => {
              //   return item.status !== 1;
              // }
            }
          ] }
        ]]

        , buttonBars: [
          {
            type: 'success'
            , label: '通过'
            , event: (a, b, c) => {
              console.log('buttonBars ===>:', a, b, c)
            }
            // isShow: item => {
            //   return item.status !== 0;
            // }
          }
          , {
            // type: "danger",
            label: '不通过'
            , icon: 'el-icon-edit'
            // event: this.checkNoPass,
            // isShow: item => {
            //   return item.status !== 1;
            // }
          }
        ]
        // ,"data":[
        //   {
        //     "id":10000,
        //     "username":"user-0",
        //     "sex":"女",
        //     "city":"城市-0",
        //     "sign":"签名-0",
        //     "datetime": new Date(),
        //     "time": new Date(),
        //     "date": new Date(),
        //     "experience":255,
        //     "logins":24,
        //     "status":0,
        //     "wealth":82830700,
        //     "classify":"作家",
        //     "score":57
        //   },
        //   {
        //     "id":10001,
        //     "username":"user-1",
        //     "sex":"男",
        //     "city":"城市-1",
        //     "sign":"签名-1",
        //     "datetime": new Date(),
        //     "date": new Date(),
        //     "time": new Date(),
        //     "experience":884,
        //     "logins":58,
        //     "status":1,
        //     "wealth":64928690,
        //     "classify":"词人",
        //     "score":27
        //   }
        // ]
      }
    }
  }
  , created() {

  }
  , mounted() {

  }, methods: {
    test1: function(value, field, row, item) {
      console.log(value, field, row, item)
      this.$confirm('确定改变', '提示', {
        confirmButtonText: '确定'
        , cancelButtonText: '取消'
        , type: 'warning'
      }).then(() => {
        row[field] = value
        this.$message({ type: 'success', message: '修改成功!' })
      }).catch(() => {
        this.$message({ type: 'info', message: '已取消修改！' })
      })
    }
  }

}
</script>
